<template>
	<view v-if="visible" class="popup-container" @click="handleClose">
		<view class="popup-content" @click.stop>
			<view class="popup-caption">
				<image src="https://jqgh-public.yqfoodec.com/20250406/logo_4323.png" class="logo"></image>
			</view>
			<view class="popup-title">{{ title }}</view>
			<view class="popup-message" v-html="message"></view>
			<view class="popup-buttons">
				<button @click="handleConfirm" class="confirm-btn">{{ confirmText }}</button>
				<button v-if="showCancel" @click="handleCancel" class="cancel-btn">{{ cancelText }}</button>
			</view>
		</view>
	</view>
</template>
 
<script>
import { ref, watch, toRefs } from 'vue';
// import logo from '@/static/images/popup/logo.png';
 
export default {
	props: {
		visible: {
			type: Boolean,
			default: false,
		},
		title: {
			type: String,
			default: '提示',
		},
		message: {
			type: String,
			default: '',
		},
		confirmText: {
			type: String,
			default: '确定',
		},
		cancelText: {
			type: String,
			default: '取消',
		},
		showCancel: {
			type: Boolean,
			default: true,
		},
	},
	setup(props, { emit }) {
		// 使用解构来获取 props 的值
		const { visible } = toRefs(props);
 
		// 本地状态（如果需要额外状态，可以在这里定义）
		const localVisible = ref(visible.value);
 
		// 监听 visible 的变化
		watch(visible, (newVal) => {
			if (!newVal) {
				emit('update:visible', false);
			}
		});
 
		// 方法
		const handleClose = () => {
			emit('update:visible', false);
		};
 
		const handleConfirm = () => {
			emit('confirm');
			handleClose();
		};
 
		const handleCancel = () => {
			emit('cancel');
			handleClose();
		};
 
		// 返回模板中需要使用的变量和方法
		return {
			handleClose,
			handleConfirm,
			handleCancel,
			// 如果需要绑定 visible 到模板，可以直接使用 props.visible 或 localVisible（如果需要额外逻辑）
			// 这里直接使用 props.visible，因为模板中已经通过 v-if="visible" 绑定了
		};
	},
};
</script>



<style scoped>
	.popup-container {
	  position: fixed;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  background-color: rgba(0, 0, 0, 0.5);
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  z-index: 99999999;
	}
	
	.popup-content {
	  background-color: #fff;
	  padding: 20px;
	  border-radius: 10px;
	  width: 70%;
	  max-height: 80%;
	  height: 48%;
	  overflow: auto;
	}
	
	.popup-caption{
		/* font-size: 18px;
		font-weight: bold; */
		text-align: center;
		margin-bottom: 30px;
	}
	.logo{
		width: 200rpx;
		height: 56rpx;
	}
	.popup-title {
	  font-size: 18px;
	  font-weight: bold;
	}
	
	.popup-message {
		margin-top: 14px;
		margin-bottom: 20px;
		font-size: 14px;
		color:#999;
		line-height: 40rpx;
	}
	
	.popup-buttons {
	  display: flex;
	  flex-direction: column;
	}
	.confirm-btn{
		color:#fff;
		background-color: red;
		width: 100%;
		border-radius: 50rpx;
	}
	.cancel-btn{
		color:#fff;
		background-color: #ccc;
		width: 100%;
		border-radius: 50rpx;
		margin-top: 40rpx;
	}
	
</style>